vue项目中使用video.js播放m3u8格式文件

您所在的位置：网站首页 › 播放this is it › vue项目中使用video.js播放m3u8格式文件

vue项目中使用video.js播放m3u8格式文件

2024-07-10 22:07| 来源: 网络整理| 查看: 265

1.安装依赖包

npm install video.js --save // 视频播放器插件 npm install videojs-contrib-hls --save // 播放hls流插件

2.在main.js引入vido.js的样式文件

import 'video.js/dist/video-js.css' //videojs样式

3.video.js所在页面引入和使用

import videojs from 'video.js' import 'videojs-contrib-hls' import "@videojs/http-streaming"

4. 页面

====================================

/ 播放器初始化

this.player = videojs('cameraMonitoringVideo', { bigPlayButton: false, textTrackDisplay: false, posterImage: true, errorDisplay: false, controlBar: true, muted: true //静音模式、、解决首次页面加载播放。 }, function () { this.play() // 自动播放 })

video.js视频播放器销毁// 离开页面销毁视频播放器

beforeDestroy() { if (this.player != null) { this.player.dispose() // dispose()会直接删除Dom元素 } }

二、使用video.js播放视频流出现的问题以及解决方案video.js播放hls时，当视频的 m3u8 文件加载成功并且浏览器无法获取其中一个 ts 文件时，video.js会不断进行重试，导致视频画面卡顿，无法正常播放视频画面。

错误信息： 404(Not Found) VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the final playlist.

// 监听错误事件(如果其中一个ts文件获取失败，需要进行重试次数限制，并且重新加载视频流，以保证视频能够继续播放)

this.player.tech_.on('retryplaylist', () => { console.log("ts文件获取失败404....."); // this.src(this.vdoSrcGuan) this.load() this.play() })

video.js播放hls时，出现视频延迟加载的问题。

this.player.on('timeupdate', function () { // 计算表最新推流的时间和现在播放器播放推流的时间 let differTime = this.buffered().end(0) - this.currentTime(); // 差值大于6s时进行重新加载直播流 if (differTime >= 6){ console.log("重新加载视频流",this.player); // this.src(this.vdoSrcGuan) this.load() this.play() } })

video.js播放hls时，初始化播放正常，过一段时间出现视频卡顿，导致页面所有的视频一直加载，无法恢复正常播放。

// 监听video播放器卡顿加载loading时候触发seeking// 说明：(1)如果卡顿次数不到三次，seekingTimes归零，继续播放；// (2)如果卡顿次数达到三次，就重新加载视频流；

let seekingTimes = 0 this.player.on("seeking",function(){ seekingTimes ++ console.log("直播卡顿加载loading",this.player); if(seekingTimes >= 3) { seekingTimes = 0 // this.src(this.vdoSrcGuan) this.load() this.play() } }) //监听video播放器拿到视频流重新播放时出发seeked this.player.on('seeked',function(){ seekingTimes = 0 // 已经拿到视频流,可以播放 console.log('seeked') })

【本文地址】

vue项目中使用video.js播放m3u8格式文件

vue项目中使用video.js播放m3u8格式文件

今日新闻

推荐新闻